<template>
	<navbar titleText="这是标题"></navbar>
	<view class="content" :style="{ paddingTop: `${navBarHeight}px` }">
		<!-- 数据展示 -->
		1111111111111111
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	// 定义导航栏高度的响应式变量
	const navBarHeight = ref(0);
	//获取导航栏高度
	const getNavBarHeight = () => {
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
		// 根据平台计算导航栏高度
		navBarHeight.value = systemInfo.platform === 'android' ?
			statusBarHeight + 48 // Android 导航栏高度
			:
			statusBarHeight + 44; // iOS 导航栏高度
	}
	// 页面挂载时获取系统信息并计算导航栏高度
	onMounted(() => {
		getNavBarHeight()
	});
</script>